<template>
  <div class="qrcodes-main">
    <div class="qrcodes-header">
      <div class="align-center">
        <div class="qrcodes-tabs">
          <div :class="['tab-item', actived === 0 && 'active']" @click="onChangeTabs(0)">渠道活码</div>
          <div :class="['tab-item', actived === 1 && 'active']" @click="onChangeTabs(1)">活码数据
          </div>
        </div>
        <div class="geek-btn" @click="onNavigationTo('/hook/qrcodes/explain')">
          <i class="el-icon-menu"></i>
          功能说明
        </div>
      </div>
      <div class="tip" v-if="actived === 0">
        <i class="el-icon-warning-outline"></i>
        <span style="margin-left: 4px;">若活码打标签、欢迎语等若干功能异常，请先购买企微API许可或进行许可续期</span>
      </div>
    </div>
    <div class="alter-box" v-if="actived === 0">
      <div class="warning-svg">
        <svg-icon class-name="warning-svg" icon-class="warning" />
      </div>
      <div class="waring-text">
        <div>
          不同渠道客户重复添加？使用 <span style="color: #2f54eb;"  @click="onNavigationTo('/hook/lockqrcodes')">锁客二维码 >></span>
        </div>
      </div>
    </div>
    <div class="qrcodes-wrap"  v-if="actived === 0">
      <div class="card-search-filter">
        <el-button type="primary" size="small" @click="onNavigationTo('/hook/qrcodes/add')" v-hasPermi="['qrcodes:add']">
          <i class="el-icon-plus"></i>
          新建渠道活码
        </el-button>
        <el-input class="search-input" size="small" placeholder="搜索渠道名称" suffix-icon="el-icon-search" />
        <el-select v-model="value" placeholder="使用成员" size="small">
          <el-option v-for="item in codeStatus" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <selectTagsIput :dataList="dataList" :chooseValue="chooseValue" @getValue="getValue"></selectTagsIput>
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="创建开始日期"
          end-placeholder="创建结束日期" size="small" style="width: 260px;">
        </el-date-picker>
        <el-button size="small">重置</el-button>
      </div>
      <el-table ref="hookTable" :data="dataSource" header-cell-class-name="table-header-class" tooltip-effect="dark"
        header-row-class-name="table-header-row-class" row-class-name="table-row-class" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="mobile" label="渠道名称">
          <template slot-scope="scope">
           <div class="title">渠道名称</div>
            <div class="com-row">创建时间：2024-05-13 17:31</div>
            <div class="com-row">创建人：主账号</div>
          </template>
        </el-table-column>
        <el-table-column property="name" label="今日新增好友数">
        </el-table-column>
        <el-table-column property="address" label="近7日新增好友数">
        </el-table-column>
        <el-table-column property="address" label="新增好友总数">
        </el-table-column>
        <el-table-column property="yser" label="使用成员">
          <template slot-scope="scope">
            <ul class="userList">
              <li><span class="green"></span>张敏</li>
              <li><span class="glay"></span>闵雨薇</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column property="tas" label="标签">
          <template slot-scope="scope">
          <div class="label-list">
            <span>核心</span>
            <span>重要</span>
          </div>
          </template>
        </el-table-column>
        <el-table-column  fixed="right" property="option" label="操作" width="250">
          <el-button type="text" @click="gotoPage()" v-hasPermi="['qrcodes:data']">数据</el-button>
          <el-button type="text" v-hasPermi="['qrcodes:edit']">编辑</el-button>
          <el-button type="text" v-hasPermi="['qrcodes:copy']">复制</el-button>
          <el-button type="text" v-hasPermi="['qrcodes:down']">下载</el-button>
          <el-button type="text" v-hasPermi="['qrcodes:del']">删除</el-button>
        </el-table-column>
        <template slot="empty">
          <TableEmpty />
        </template>
      </el-table>
      <div class="table-footer">
        <div class="check-text">已选：
          <span style="color: rgb(48, 112, 255);">0</span>
          <a>全选</a>
        </div>
        <div style="margin-left: 8px;">
          <el-button size="small" @click="getBatchUser" v-hasPermi="['qrcodes:batchAddUser']">批量添加成员</el-button>
          <el-button size="small"  @click="getDelBatchUser" v-hasPermi="['qrcodes:batchDelUser']">批量删除成员</el-button>
          <el-button size="small" @click="getPoster" style="margin-right: 10px" v-hasPermi="['qrcodes:batchAddPoster']">批量生成活码海报</el-button>
          <el-popover
            placement="top"
            width="250"
            trigger="click"
            popper-class="popover-big"
            v-model="visible">
            <div class="popover-title"><i class="el-icon-warning"></i>导出数据共 1 条，是否确认导出？</div>
            <div class="popover-btn">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
            </div>
            <el-button size="small" slot="reference" v-hasPermi="['qrcodes:batchExport']">批量导出使用成员</el-button>
          </el-popover>

        </div>
      </div>
    </div>
     <liveCodeData v-if="actived == 1"></liveCodeData>
<!--    批量添加成员-->
    <addBatchUser v-if="showAddBatchUser" :visableIf.sync="showAddBatchUser"></addBatchUser>
<!--    批量删除成员-->
    <delBatchUser v-if="showDelBatchUser" :visableIf.sync="showDelBatchUser"></delBatchUser>
<!--    批量生成活码海报-->
    <addPoster v-if="showAddPoster" :visableIf.sync="showAddPoster"></addPoster>
  </div>
</template>
<script>


export default {
  components:{
    liveCodeData:()=> import('./liveCodeData.vue'),
    selectTagsIput:()=> import('./selectTagsIput.vue'),
    addBatchUser:()=> import('./addBatchUser.vue'),
    delBatchUser:()=> import('./delBatchUser.vue'),
    addPoster:()=> import('./addPoster.vue'),

  },
  data() {
    return {
      actived: 0,
      visible:false,
      showAddBatchUser:false,
      showDelBatchUser:false,
      showAddPoster:false,
      chooseValue:[],
      dataList: [
        {
          field: "gasUser",
          label: "社群行为",
          showChild:true,
          child: [
            {
              field: "userId",
              label: "未入常规群",
              dictKey: null,
              dateFormat: null
            },
            {
              field: "userName",
              label: "已入常规群",
              dictKey: null,
              dateFormat: null
            }
          ]
        },
        {
          field: "gasUserInfo",
          label: "私聊活跃度",
          showChild:true,
          child: [
            {
              field: "certificateType",
              label: "新好友1小时未发言",
              dictKey: "certificate_type",
              dateFormat: null
            },
            {
              field: "certificateNo",
              label: "持续3天未发言",
              dictKey: null,
              dateFormat: null
            }
          ]
        },

      ],
      codeStatus: [
        {
          value: 1,
          label: '闵雨微'
        }, {
          value: 2,
          label: '肖采薇'
        }],
      dataSource: [
        {
          mobile:'渠道名称',
          name:'今日新增好友',
          address:'0',
        }
      ],
    }
  },
  methods: {

    onChangeTabs(tabIdx) {
      this.actived = tabIdx
    },
    getPoster(){
     this.showAddPoster=true;
    },
    getDelBatchUser(){
      this.showDelBatchUser=true;
    },
    getValue(obj){
      console.log('obj的值',obj);
      //获取所有子组件的值
      this.chooseValue=obj.checkedData;

    },
    getBatchUser(){
      this.showAddBatchUser=true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },
    gotoPage(){
      this.$router.push({
        path:'qrcodes/viewAddFriendDetails',
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.qrcodes-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;
  .qrcodes-header {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .align-center {
      display: flex;
      align-items: center;

      .qrcodes-tabs {
        display: flex;
        align-items: center;
        height: 100%;

        .tab-item {
          position: relative;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, .65);
          cursor: pointer;
          padding: 12px 0;
          &:hover {
            color: #5993ff;
          }

          &.active {
            font-weight: 500;
            color: #3070ff;
            text-shadow: 0 0 .25px currentColor;

            &::after {
              content: '';
              position: absolute;
              bottom: -1px;
              left: 0;
              right: 0;
              width: 100%;
              height: 2px;
              background: #3070ff;
            }
          }

          &:not(:first-child) {
            margin-left: 32px;
          }
        }
      }

      .geek-btn {
        color: #2f54eb;
        background: #f0f5ff;
        border-color: #adc6ff;
        padding: 2px 7px;
        font-size: 13px;
        border: 1px solid #e9e9e9;
        margin-left: 40px;
        cursor: pointer;
      }
    }

    .tip {
      color: rgb(255, 73, 73);
      line-height: 32px;
      font-size: 14px;
      font-weight: 400;
      display: flex;
      align-items: center;
    }
  }

  .alter-box {
    box-sizing: border-box;
    margin: 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    background-color: #f0f7ff;
    font-variant: tabular-nums;
    line-height: 24px;
    position: relative;
    display: flex;
    padding: 8px 15px;
    word-wrap: break-word;

    .warning-svg {
      font-size: 18px;
    }

    .waring-text {
      margin-left: 8px;
    }
  }

  .qrcodes-wrap {
    margin: 12px;
    background-color: #fff;
    border-radius: 4px;
    .card-search-filter {
      display: grid;
      column-gap: 8px;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      grid-template-columns: 138px 200px 160px 320px 260px 60px;
    }

    .table-footer {
      display: flex;
      align-items: center;
      grid-gap: 8px;
      gap: 8px;
      padding: 10px 12px;
      background: #fff;
      border-top: 1px solid #e9e9e9;
      position: fixed;
      left: 228px;
      right: 0;
      bottom: 0;

      .check-text {
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        line-height: 44px;

        a {
          margin-left: 8px;
          color: #4371F6;

          span {
            margin-left: 6px;
          }
        }
      }
    }
  }
  .empty-qrcodes {
    padding: 120px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .empty-cover {
      width: auto;
      height: 200px;
      margin-bottom: 8px;
    }
    .empty-description {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .empty-footer {
      margin-top: 16px;
    }
  }
}
.title {
  height:30px;
  display: flex;

}
.userList {
  display: flex;
  flex-wrap: wrap;
  li{
    list-style: none;
    border: 1px solid #eee;
    height: 30px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    span {
      display: inline-block;
      margin-right: 6px;
      border-radius: 50%;
      width: 8px;
      height: 8px;

      &.glay {
       background: #8C8C8C;
      }
      &.green{
        background: #52c41a;
      }
    }

  }
}
.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;
    i{
      margin-left: 5px;
      cursor: pointer;
    }

  }
}
.title {
  display: flex;
  align-items: center;
  height: 25px;
  color: rgb(87, 107, 149);
  margin-right: 10px;
  font-weight: 600;
}
.com-row{
  color: rgba(0, 0, 0, .45);
}

.popover-big {
  .popover-title {
    i {
      font-size: 16px;
      color: #f8ac59;
      margin-right: 10px;
    }
  }
  .popover-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
</style>
